<template>
    <div class="overflow: auto">
        <div class="query-c">
        <Button type="info" @click="insert">添加</Button>
        用户名:<Input v-model="searchParam.name" placeholder="请输入查询内容" style="width: 200px" /> 
        手机号: <Input v-model="searchParam.mobile" placeholder="请输入查询内容" style="width: 100px" />
        <!-- 地区：
        <Select v-model="model8" clearable style="width:200px">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select> -->
        <Button type="primary" icon="ios-search" @click="getUserList()">搜索</Button>
        </div>
        <br>
        <Table border :columns="userColumns" :data="userList"></Table>
        <br>
        <Page :total="searchParam.total"  @on-change="pageChange"/>
        <!-- 添加/编辑 -->
        <Modal
        v-model="userModalshow"
        title="添加/编辑"
        >
            <Form ref="userForm" :model="userForm" :rules="userFormRules" :label-width="80">
                <FormItem label="名称" prop="name">
                    <Input type="text" v-model="userForm.name"></Input>
                </FormItem>
                <FormItem label="账号" prop="account">
                    <Input type="text" v-model="userForm.account"></Input>
                </FormItem>
                <FormItem label="密码" prop="password" v-show="isAdd">
                    <Input type="text" v-model="userForm.password"></Input>
                </FormItem>
                <FormItem label="手机号" prop="mobile">
                    <Input type="text" v-model="userForm.mobile"></Input>
                </FormItem>
                <!-- <FormItem label="头像" prop="profile">
                    <Input type="text" v-model="userForm.profile"></Input>
                </FormItem> -->
                <FormItem>
                    <Button type="primary" @click="handleSubmit('userForm')">提交</Button>
                    <Button @click="handleReset('userForm')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>

<script>
    export default {
        data () {
            const validateAccount = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('Please enter your account'));
                }else if(!new RegExp(/^[A-Za-z]{1}[A-Za-z0-9_-]{3,15}$/).test(value)){
                    callback(new Error('必须是以字母开头，只能包含字母数字下划线和减号，4到16位'));
                }else{
                    callback();
                }
            };
            const validatePassword = (rule, value, callback) => {
                if(!this.isAdd){
                    callback();
                }else if (!value) {
                    callback(new Error('Please enter your password'));
                } else if (!new RegExp(/(?=^.{6,16}$)(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*]).*$/).test(value)) {
                    callback(new Error('6-16位，,至少有一个数字，一个大写字母，一个小写字母和一个特殊字符，四个任意组合'));
                } else {
                    callback();
                }
            };
            const validateMobile = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入手机号'));
                } else if (!new RegExp(/^1\d{10}$/).test(value)) {
                    callback(new Error('手机号不正确'));
                } else {
                    callback();
                }
            };
            return {
                userColumns: [
                    {
                        title: '用户名',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '手机号',
                        key: 'mobile'
                    },
                    {
                        title: '创建时间',
                        key: 'createDate'
                    },
                    {
                        title: '账号',
                        key: 'account'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.update(params.index)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.delete(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                userList: [],
                searchParam: {name: '', department: '', pageNum: 1, pageSize: 10, total: 0},
                isAdd: false,
                userForm: {},
                userModalshow: false,
                userFormRules: {
                    name: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' },
                        { type: 'string', max: 20, message: 'Introduce no more than 20 words', trigger: 'blur' }
                    ],
                    account: [
                        { required: true, validator: validateAccount, trigger: 'blur' }
                    ],
                    password: [
                        { required: true, validator: validatePassword, trigger: 'change' }
                    ],
                    mobile: [
                        { required: true, validator: validateMobile, trigger: 'change' }
                    ],
                },
            }
        },
        mounted(){
            this.getUserList()
        },
        methods: {
            insert(){
                this.isAdd = true
                this.userModalshow = true
                this.userForm = {}
            },
            update(index){
                console.log(this.userList[index].id)
                this.isAdd = false
                this.userModalshow = true
                this.userForm = this.userList[index]
            },
            delete (index) {
                console.log(this.userList[index].id)
                if(confirm('确定要删除?')){
                    this.$axios.post('/manager/user/update/',{id: this.userList[index].id, status: -1}).then(res => {
                        //console.log(res)
                        if(res.status){
                            this.$Message.success('删除成功!');
                            this.getUserList()
                        }else{
                            this.$Message.error(res.message);
                        }
                    }).catch(error=>{
                        console.error(error)
                    })
                }
            },
            pageChange(pageNum){
                this.searchParam.pageNum = pageNum
                this.getUserList()
            },
            getUserList(){
                let params = {
                    "pageSize": this.searchParam.pageSize,
                    "pageNum": this.searchParam.pageNum,
                    "conditions":[
                        {"key":"name","value":this.searchParam.name,"method":"like"},
                        {"key":"mobile","value":this.searchParam.mobile,"method":"like"},

                        {"key":"createDate","value":"createDate","method":"desc"}
                    ]
                }

                this.$axios.post('/manager/user/queryList',params).then(res => {
                    //console.log(res)
                    if(res.status){
                        //alert(2)
                        this.userList = res.data.records
                        this.searchParam.total = res.data.total
                    }else{
                        this.$Message.error(res.message);
                    }
                }).catch(error=>{
                    console.error(error)
                })
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let url = this.isAdd ? '/manager/user/insert' : '/manager/user/update'
                        this.$axios.post(url,this.userForm).then(res => {
                            //console.log(res)
                            if(res.status){
                                this.$Message.success('操作成功');
                                this.getUserList()
                            }else{
                                this.$Message.error(res.message);
                            }
                            this.userModalshow = false    
                        }).catch(error=>{
                            console.error(error)
                        })
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>
